<template>
  <div ref='container' class='container'>
    <div>
      <!-- 热门城市 -->
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-item" v-for="item in hotCities" :key="item.id" @click="changeCityName(item.name)">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 字母排序 -->
      <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li class="sort-item" v-for="(val, key) in cities" @click="changeSort(key)">{{ key }}</li>
        </ul>
      </div>
      <!-- list -->
      <div class="list">
        <div v-for="(val, key) in cities" :ref='key'>
          <div class="list-title">{{ key }}</div>
          <ul class="list-list">
            <li class="list-item" v-for="item in val" :key="item.id"  @click='changeCityName(item.name)'>
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex"


import BScroll from 'better-scroll'
export default {
  props: ["cities", "hotCities"],
  data() {
      return {
        scroll:''
      }
  },
  methods: {
      changeSort(sortName){
          this.scroll.scrollToElement(this.$refs[sortName][0]);
      },
      changeCityName(cityName){
          this.changeCity(cityName);
          this.$router.push('/')
      },
      ...mapMutations(['changeCity'])
  },    
  mounted() {
      let container = this.$refs['container'];
      this.scroll = new BScroll(container)
  },
};
</script>

<style scoped>
.container{
    position: absolute;
    overflow: hodden;
    left: 0;
    right: 0;
    bottom: 0;
    top:.86rem;
}
.hot-title {
  font-size: 0.23rem;
  color: #212121;
  padding: 0.3rem;
}
.hot-list {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  font-size: 0.28rem;
}
.hot-list::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 33.33333%;
  left: 33.33333%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.hot-item {
    position: relative;
  width: 33.33333%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
}

.sort-title {
  font-size: 0.23rem;
  color: #212121;
  padding: 0.3rem;
}
.sort-list {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  font-size: 0.28rem;
}

.sort-item {
  width: 16.6666%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
}

.list-title {
  font-size: 0.23rem;
  color: #212121;
  padding: 0.3rem;
}
.list-list {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  font-size: 0.28rem;
}
.list-list::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 33.33333%;
  left: 33.33333%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.list-item {
    position: relative;
  width: 33.33333%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
}
</style>